<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">{{config?config.interval_name:'-'}}充值</block>
		</cu-custom>

		<view class="bg-blue overflow padding-lg text-white text-center relative">
			<view class="margin-tb ">当前{{config?config.interval_name:'-'}}</view>
			<view class="text-xl text-bold ">{{member?member.account.user_integral:'-'}}</view>
		</view>

		<view class="cu-form-group ">
			<view class="title">充值金额</view>
			<input placeholder="充值数量" name="input" class="text-right" v-model="formData.number"></input>
		</view>
		<view class="cu-form-group ">
			<view class="title">充值比例</view>
			<view class="text-right text-gray">1元={{config?config.withdraw.exchange_rate:'-'}}{{config?config.interval_name:'-'}}</view>
		</view>
		<view class="margin-top bg-white padding-bottom">
			<view class="cu-bar padding-lr text-lg">请选择支付方式</view>
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="cu-avatar bg-white">
						<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/images/h5/icon-wechat.png" mode="aspectFit"></image>
					</view>
					<view class="content w100 margin-left-sm">
						<view>微信支付<text class="cu-tag bg-orange text-sm sm">推荐</text></view>
						<view class="text-gray text-sm">亿万用户的选择，更快更安全</view>
					</view>
					<view class="action">
						<view class="cuIcon cuIcon-roundcheck  default" :class="payment_code=='Wechat'?'text-'+theme:'text-gray'"></view>
					</view>
				</view>
			</view>
		</view>

		<view class="text-center text-gray margin" v-if="config && formData.number>0">预计可得{{config?config.interval_name:'-'}}:{{formData.number * config.withdraw.exchange_rate}}</view>

		<view class="cu-bar tabbar shadow foot " :class="['bg-'+theme,loading?'light':'']">
			<view class="submit text-lg" v-if="loading">
				<text class="cuIcon-loading2 cuIconfont-spin"></text>
				充值中
			</view>
			<view class="submit text-lg" @tap="submitApply" v-else>
				立即充值
			</view>
		</view>

		<Foot :value="''"></Foot>
	</view>
</template>

<script>
	import Foot from '@/components/default/foot.vue'
	export default {
		components: {
			Foot,
		},
		data() {
			return {
				member: null,
				config: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				payment_code: 'Wechat',
				loading: false,
				formData: {
					number: 0,
				},
			}
		},
		onLoad(options) {
			if (this.$common.loginAuth(true)) {
				this.$common.getConfig().then((config) => {
					this.config = config
				})
				this.$common.getMember().then((member) => {
					this.member = member
				})
			}
		},
		onShow() {
			if (this.$common.loginAuth(true)) {}
		},
		methods: {
			submitApply() {
				let money = this.formData.number
				if (!money) {
					this.$common.showError('请输入金额')
					return
				}
				if (this.loading) return
				this.loading = true

				// #ifdef MP-WEIXIN
				this.mini_pay(this.id)
				// #endif

				// #ifdef H5
				this.$jwx.createPay('recharge_interval', {
					money: money
				}).then((res) => {
					this.loading = false
					this.$common.rmCache('member')
					this.$common.getMember().then((member) => {
						this.member = member
					})
					this.$common.showSuccess('支付成功')
				}, (error) => {
					this.$common.showError(22)
					this.$common.showError(error)
					this.loading = false
				})
				return
				// #endif

				// #ifdef APP-VUE
				this.$http.post('pay', {
						pay_type: 1,
						trade_type: 'app',
						order_group: 'recharge_interval',
						data: JSON.stringify({
							money: money
						})
					})
					.then((response) => {
						console.log(response)

						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: response.data.data.config,
							success: (e) => {
								this.loading = false
								this.$common.rmCache('member')
								this.$common.getMember().then((member) => {
									this.member = member
								})
								this.$common.showSuccess('支付成功')
							},
							fail: (e) => {
								console.log("fail", e);
								uni.showModal({
									content: "支付失败,原因为: " + e.errMsg,
									showCancel: false
								})

								this.loading = false
							},
							complete: () => {
								this.loading = false
							}
						})
					})
					.catch((response) => {
						console.log((response))
						this.loading = false
						this.payLoading = false
					})
				// #endif

			},
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style>
	.txbtn {
		min-width: 160rpx;
	}

	.loglg {
		right: 0;
		top: 30rpx;
		border-radius: 30rpx 0 0 30rpx;
	}
</style>
